<h1>Fotografije na naslovnoj strani</h1>
<p>
	* Preporučene dimenzije slike po broju stavki su (rezolucije 72dpi):
	<br>&nbsp;&nbsp;&nbsp;4 stavke: 350x200px
	<br>&nbsp;&nbsp;&nbsp;3 stavke: 467x200px
	<br>&nbsp;&nbsp;&nbsp;2 stavke: 700x200px
</p>

<? $slideshow = Set::extract('{n}.Slideshow', $slideshow) ?>

<?= $this->Form->create('Slideshow', array('url'=>'/admin_slideshow/save', 'enctype'=>'multipart/form-data', 'style'=>'width:500px')) ?>

	<div class="buttons">
		<div style="float:left">
			<a href="javascript:void(0)" onclick="$('.slideshow.sortable').toggleClass('sorting')">Promenite redosled</a> |
			<a href="javascript:void(0)" onclick="addSlide()">+ Dodajte slajd</a>
		</div>
		<?= $this->Form->submit('Sačuvaj', array('div'=>false)) ?>
		<?= $this->Form->submit('Poništi', array('onclick'=>"location.href='/admin_slideshow'", 'type'=>'button', 'div'=>false)) ?>
	</div>
	
	<ul class="slideshow sortable">
		<? foreach($slideshow as $slide): ?>
		<li value="<?= $slide['order'] ?>">
			<div class="actions">
				<a href="javascript:void(0)" class="handle">re-order</a>
				<a href="javascript:void(0)" class="delete" onclick="removeSlide($(this).parent().parent())">delete</a>
			</div>
			
			<?= $this->Form->hidden($slide['id'].'.Slideshow.id', array('value'=>$slide['id'])) ?>
			<?= $this->Form->hidden($slide['id'].'.Slideshow.order', array('value'=>$slide['order'])) ?>
			<?= $this->Form->hidden($slide['id'].'.Slideshow.image', array('value'=>$slide['image'])) ?>
			
			<?= $this->Form->text($slide['id'].'.Slideshow.title', array('value'=>$slide['title'], 'class'=>'large', 'placeholder'=>'Naslov')) ?>
			<?= $this->Form->textarea($slide['id'].'.Slideshow.description', array('value'=>$slide['description'], 'placeholder'=>'Kratak opis', 'maxlength'=>'140', 'style'=>'resize:none')) ?>
			<?= $this->Form->text($slide['id'].'.Slideshow.link', array('value'=>$slide['link'], 'class'=>'large link', 'placeholder'=>'Link')) ?>
			
			<div class="image">
				<?= $this->Html->image('showcase/'.$slide['image']) ?>
				<?= $this->Form->file($slide['id'].'.Slideshow.file', array('onchange'=>"$(this).parent().addClass('changed')")) ?>
			</div>
			<br clear="all">
		</li>
		<? endforeach; ?>
	</ul>

	<div class="buttons">
		<?= $this->Form->submit('Sačuvaj', array('div'=>false)) ?>
		<?= $this->Form->submit('Poništi', array('onclick'=>"location.href='/admin_slideshow'", 'type'=>'button', 'div'=>false)) ?>
	</div>
<?= $this->Form->end() ?>

<script type="text/javascript">
$(function(){
	$('.sortable').sortable({
		handle: '.handle',
		revert:true,
		placeholder:'sortable-placeholder',
		forcePlaceholderSize:true,
		
		stop: function(e,ui) {
			updateIndexes(ui.item.parent());
		}
	});
})

function removeSlide(li) {
	if(confirm('Da li želite da obrišete slajd?')){
		var ul = li.parent();
		console.log(ul);
		if(ul.children('li').length>1) {
			li.remove();
			updateIndexes();
		}else{
			alert('Ne možete obrisati sve slajdove!\nMakar jedan mora ostati.');
		}
	}	
}
function updateIndexes(ul) {
	var ul = ul ? ul : $('.slideshow.sortable');
	ul.children('li').each(function(index){
		$(this).attr("value", index);
		$(this).find("input[type=hidden]").eq(1).val(index);
		$(this).find("input,textarea").each(function(){
			if(this.name) {
				this.name = this.name.replace(/data\[\d+\]/, 'data['+index+']');
			}
		});
	});
}

function addSlide() {
	var ul = $('.slideshow.sortable');
	var newItem = ul.children('li').eq(0).clone(true);
	newItem
		.addClass('new')
		.find('img').remove();
	newItem.find('input,textarea').val('');
	ul.prepend(newItem);
	
	updateIndexes(ul);
}
</script>
